<script setup>
import t_01_c from "@/assets/images/disinfect/map-setting/tools/t_01_c@2x.png";
import t_01_n from "@/assets/images/disinfect/map-setting/tools/t_01_n@2x.png";
// import t_02_c from "@/assets/images/disinfect/map-setting/tools/t_02_c@2x.png";
// import t_02_n from "@/assets/images/disinfect/map-setting/tools/t_02_n@2x.png";
// import t_03_c from "@/assets/images/disinfect/map-setting/tools/t_03_c@2x.png";
// import t_03_n from "@/assets/images/disinfect/map-setting/tools/t_03_n@2x.png";
// import t_04_c from "@/assets/images/disinfect/map-setting/tools/t_04_c@2x.png";
// import t_04_n from "@/assets/images/disinfect/map-setting/tools/t_04_n@2x.png";
import t_05_c from "@/assets/images/disinfect/map-setting/tools/t_05_c@2x.png";
import t_05_n from "@/assets/images/disinfect/map-setting/tools/t_05_n@2x.png";
import t_06_c from "@/assets/images/disinfect/map-setting/tools/t_06_c@2x.png";
import t_06_n from "@/assets/images/disinfect/map-setting/tools/t_06_n@2x.png";
import t_07_c from "@/assets/images/disinfect/map-setting/tools/t_07_c@2x.png";
import t_07_n from "@/assets/images/disinfect/map-setting/tools/t_07_n@2x.png";
import t_08_c from "@/assets/images/disinfect/map-setting/tools/t_08_c@2x.png";
import t_08_n from "@/assets/images/disinfect/map-setting/tools/t_08_n@2x.png";
import { ref } from "vue";

const emit = defineEmits(["action"]);

const tools = {
  list: [
    { id: "01", title: "路径", imgC: t_01_c, imgN: t_01_n },
    // { id: "02", title: "区域", imgC: t_02_c, imgN: t_02_n },
    { id: "06", title: "充电点", imgC: t_06_c, imgN: t_06_n },
    { id: "07", title: "电梯内点", imgC: t_07_c, imgN: t_07_n },
    { id: "08", title: "等电梯点", imgC: t_08_c, imgN: t_08_n },
    // { id: "03", title: "放大", imgC: t_03_c, imgN: t_03_n },
    // { id: "04", title: "缩小", imgC: t_04_c, imgN: t_04_n },
    { id: "05", title: "地图", imgC: t_05_c, imgN: t_05_n },
  ],
  active: ref("05"),
  change(id) {
    tools.active.value = id;
    emit("action", id);
  },
};
</script>

<template>
  <div
    class="w-16 bg-white rounded text-center absolute right-8 bottom-8 shadow-2xl"
  >
    <div class="text-xs font-bold leading-5 text-[#707070]">Tools</div>
    <div
      v-for="item in tools.list"
      :key="item.id"
      class="h-[78px] pt-4 cursor-pointer select-none hover:bg-[#e5e5e5]"
      data-test="tools-item"
      @click="tools.change(item.id)"
    >
      <img
        class="h-[18px] w-[18px]"
        :src="item.id === tools.active.value ? item.imgC : item.imgN"
      />
      <p
        class="text-xs font-bold leading-none"
        :class="
          item.id === tools.active.value ? 'text-[#707bdf]' : 'text-[#949494]'
        "
      >
        {{ item.title }}
      </p>
    </div>
  </div>
</template>
